import 'dart:ui';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:just_audio/just_audio.dart';
import 'package:neon_circular_timer/neon_circular_timer.dart';

import 'bottomPicker.dart';

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  String audioName = 'Words Repeat';
  final player = AudioPlayer();
  static const int countDownDefaultDuration = 15 * 60;
  int currentCountDownDuration = 0;
  final CountDownController countDownController = new CountDownController();

  void bottomPicker(BuildContext buildContext) {
    List<Text> items=[];

    for (int i=1; i<=24; i++){
      // 构造 5 - 120 分钟 定时列表
      int sec = i * 5;
      items.add(Text(sec.toString(), style: TextStyle(color: Colors.white),));
    }

    showCupertinoModalPopup(
      context: buildContext,
      builder: (_) =>BottomPicker(
        title: '到计时',
        items: items,
        width: 0.8.sw,
        height: 0.45.sh,
        onDurationResetCallback: this.resetCountDownDuration,
      ),
    );
  }

  void resetCountDownDuration(int second){
    setState(() {
      this.currentCountDownDuration = second;
    });
    this.countDownController.restart(duration: second);
    Navigator.pop(context);
  }

  void onCountDownCompleted(){
    print('count down completed');
    this.player.stop();
  }

  void onMenuPressed(){
    HapticFeedback.mediumImpact();
  }

  void onPlayPressed(){
    HapticFeedback.mediumImpact();
    if(this.player.playing){
      this.player.pause();
      this.countDownController.pause();
    }
    else{
      this.player.play();
      this.countDownController.start();
    }
    setState(() {
      this.player.playing;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    this.player.setAsset('assets/audio/little-thunder-rain.mp3');
    this.player.setLoopMode(LoopMode.one);
    this.player.play();
    super.initState();
  }

  void onDurationPickerPressed(){
    HapticFeedback.mediumImpact();
    this.bottomPicker(context);
  }

  NeonCircularTimer countDownWidget(){

    TextFormat textFormat = TextFormat.MM_SS;
    if(this.currentCountDownDuration > 60 * 60 - 1)
      textFormat = TextFormat.HH_MM_SS;

    return NeonCircularTimer(
      onComplete: this.onCountDownCompleted,
      width: 0.8.sw,
      controller: countDownController,
      duration: countDownDefaultDuration,
      strokeWidth: 7.w,
      isTimerTextShown: true,
      isReverse: true,
      isReverseAnimation: true,
      neumorphicEffect: true,
      outerStrokeColor: Colors.grey.shade200,
      innerFillGradient: LinearGradient(colors: [
        Colors.greenAccent.shade700,
        Colors.greenAccent.shade400
      ]),
      strokeCap: StrokeCap.round,
      innerFillColor: Colors.grey.shade200,
      backgroudColor: Colors.transparent,
      neonColor: Colors.transparent,
      textStyle: TextStyle(
        fontSize: 180.sp, fontWeight: FontWeight.normal,
        color: Colors.white, fontFeatures: [FontFeature.tabularFigures()],
      ),
      textFormat: textFormat,
    );

  }

  @override
  Widget build(BuildContext context) {

    ScreenUtil.init(
      BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width,
        maxHeight: MediaQuery.of(context).size.height,
      ),
      designSize: Size(1080, 2440),
      orientation: Orientation.portrait,
    );
    
    return Container(
      decoration: BoxDecoration(
          image: DecorationImage(
             image: AssetImage("assets/img/background-img-1.jpeg"),
              // image: AssetImage("assets/img/little-thunder-rain.jpeg"),
              fit: BoxFit.cover
          )
      ),
      child: Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          centerTitle: true,
          title: Text(widget.title, style: TextStyle(fontSize: 100.sp),),
          elevation: 0,
          backgroundColor: Colors.transparent,
        ),
        body: Container(
//          color: Colors.red,
          width: 1080.w,
          height: 2100.h,
          margin: EdgeInsets.only(left: 10.w, right: 10.w, top: 20.h, bottom: 40.h),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: <Widget>[
              Container(height: 50.h,),

              Text(this.audioName, style: TextStyle(fontSize: 80.sp, color: Colors.white70),),

              Container(height: 50.h,),

              this.countDownWidget(),

              Container(height: 150.h,),

              Padding(
                padding: EdgeInsets.only(left: 90.w, right: 90.w, top: 5.w, bottom: 40.w),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: [
                      IconButton(
                        icon: Icon(Icons.menu, color: Colors.white, size: 80.w),
                        splashColor: Colors.transparent,
                        highlightColor: Colors.greenAccent.shade100,
                        onPressed: this.onMenuPressed,
                      ),
                      IconButton(
                        icon: Icon(this.player.playing ? Icons.pause : Icons.play_arrow, color: Colors.white, size: 80.w),
                        splashColor: Colors.transparent,
                        highlightColor: Colors.greenAccent.shade100,
                        onPressed: this.onPlayPressed,
                      ),
                      IconButton(
                          icon: Icon(Icons.access_alarm, color: Colors.white, size: 80.w),
                          splashColor: Colors.transparent,
                          highlightColor: Colors.greenAccent.shade100,
                          onPressed: this.onDurationPickerPressed
                      ),
                    ]),
              )
            ],
          ),
        ),

//          floatingActionButton: FloatingActionButton(
//            onPressed: _incrementCounter,
//            tooltip: 'Increment',
//            child: Icon(Icons.add),
//          ), // This trailing comma makes auto-formatting nicer for build methods.
      ),
    );
  }
}
